<template>
    <div>
        <el-dialog
            v-model="dialogVisible"
            title="查看excel文件详情"
            style="width: 90%;"
            top="0"
            >
            <!-- excel内容区域  -->
            <el-row style="height: calc(100vh - 75px);width: 100%;">
                <el-col :span="24" style="overflow: scroll;height: 90%">
                    <div id="leftExcelContainer"></div>
                </el-col>
                <el-col :span="24" style="text-align: left;">
                    <!-- sheet信息区域 -->
                    <el-button-group>
                        <template v-for="(sheetItem,index) in leftSheetNames" :key="sheetItem">
                            <el-button :type="leftActiveIndex==index?'primary':'info'"  @click="changeLeftSheet(index)">{{sheetItem}}</el-button>
                        </template>
                    </el-button-group>
                </el-col>
            </el-row>
         
        </el-dialog>
        
    </div>
</template>
<script>

import * as XLSX from "xlsx";
import {loadFile} from '@/api/system/attachment.js'
export default {
    components: {
    },
    data() {
        return {
            // 本次预览的回测数据ID
			id:'',
            // 左侧工作表数组
            leftSheetNames:[],
            // 左侧文件数据
            leftFileData:new Blob([]),
            // 左侧活动sheet索引号
            leftActiveIndex:0,
            filePath:'',
            dialogVisible:false,
        }
    },
    async mounted(){
    },
    methods:{
        async openModal(path){
            this.dialogVisible = true
            this.filePath = path
            // 默认读取第一个sheet
            await this.loadLeftExcelAndRender(0);
        },
        // 左侧切换sheet
        changeLeftSheet(index){
            this.leftActiveIndex = index;
            this.loadLeftExcelAndRender(index);
        },
        // 获取左侧文件数据
        async getLeftFile(){
            this.leftFileData = new Blob([])
            await loadFile({path:this.filePath}).then(async res=>{
                this.leftFileData = new Blob([res.data], { type: res.headers['content-type'] });
            })
        },
        // 处理表格
        doTable(excelDom){
            // 动态添加细线表格样式
            const table = excelDom.querySelector('table');
            if (table) {
                // 设置表格整体样式
                table.style.borderCollapse = 'collapse'; // 合并边框
                table.style.width = '100%'; // 宽度占满容器
                table.style.fontSize = '13px'; // 字体大小
                table.style.lineHeight = '1.2'; // 行高
                table.style.textAlign = 'left'; // 文字居中
                //table.style.border = '1px solid #ddd'; // 外边框细线

                // 设置表头样式
                const thead = table.querySelector('tr');
                if (thead) {
                    thead.style.backgroundColor = '#f2f2f2'; // 表头背景颜色
                    thead.style.fontWeight = 'bold'; // 表头字体加粗
                    thead.style.whiteSpace = 'nowrap'; // 防止内容换行，确保宽度自适应
                }

                // 设置单元格样式
                const cells = table.querySelectorAll('td, th');
                cells.forEach(cell => {
                    //cell.style.border = '1px solid #ddd'; // 细线边框
                    cell.style.padding = '5px'; // 内边距
                });
                // 为所有非表头的 td 添加点击事件
                const tds = table.querySelectorAll('tbody td'); // 获取 tbody 中的 td
                tds.forEach((td) => {
                    td.addEventListener('click', () => {
                        console.log('单元格的点击事件');
                        // 清除所有单元格的背景色
                        tds.forEach(cell => {
                            //cell.style.backgroundColor = ''; // 清除背景色
                        });

                        // 为当前点击的单元格设置背景色
                        //td.style.backgroundColor = '#cfe2ff'; // 设置背景色为浅蓝色

                        // 计算行号和列号
                        const row = td.parentNode.rowIndex; // 获取行号（从 0 开始）
                        const col = td.cellIndex; // 获取列号（从 0 开始）
                    });
                });
            }
        },
        // 加载左侧excel并渲染到页面上
        async  loadLeftExcelAndRender(sheetIndex) {
            await this.getLeftFile()
            let that = this
            try {
                const reader = new FileReader();
                reader.onload = function (e) {
                    let excelDom = document.getElementById('leftExcelContainer');
                    const data = new Uint8Array(e.target.result);
                    const workbook = XLSX.read(data, { type: 'array' });
                    that.leftSheetNames = [...workbook.SheetNames]
                    const sheetName = workbook.SheetNames[sheetIndex]; // 获取下标对应的sheet的名称
                    const worksheet = workbook.Sheets[sheetName];
                    const html = XLSX.utils.sheet_to_html(worksheet, { id: sheetName }); // 只渲染对应的sheet
                    excelDom.innerHTML = html; // 将HTML渲染到指定的div中
                    that.doTable(excelDom)
                };
                reader.readAsArrayBuffer(this.leftFileData);
            } catch (error) {
                console.error('Error loading or rendering Excel:', error);
            }
        },

    },
}
</script>
<style scoped>
#rightExcelContainer,
#leftExcelContainer {
    width: 100%;
    height: 100%;
}
:deep(table tr td) {
    text-align: center;
    border: solid 1px gray;
    height: 17px;
}

/* 定义闪烁动画 */
@keyframes blink {
  0%, 100% { box-shadow: 0px 4px 4px white; }
  50% { box-shadow: 0px 5px 5px red; }
}
 
/* 应用动画到元素 */
.blink-text {
  /* 动画名称 持续时间 无限循环 */
  animation: blink 1.5s infinite; 
  color: red;
  margin: 0;
  font-size: 14px;
  margin-bottom: 10px;
}
.noDiff {
	color: blue;
	margin: 0;
	font-size: 14px;
	line-height: 2.5;
}
.diff {
	color: red;
	margin: 0;
	font-size: 14px;
	line-height: 2.5;
}
</style>